<template>
  <div class="roleManage-details-container">
    <div class="page-title-container flex" title="查看">
      <a-button type="default" @click="back()">返回 </a-button>
    </div>
    <div class="page-body-container">
      <a-collapse v-model="activeKey">
        <!-- 基本信息 -->
        <a-collapse-panel key="1" :show-arrow="false" title="基本信息">
          <template slot="header">
            <div class="collapse-custom-header">
              {{ activeKey.includes("1") ? "收起" : "展开" }}
              <div class="icon" :class="[activeKey.includes('1') && 'active']">
                <bj-icon-font
                  type="xl"
                  color="#0068B7"
                  :size="10"
                ></bj-icon-font>
              </div>
            </div>
          </template>
          <div class="base-info-container">
            <a-form-model ref="ruleForm" :model="baseInfo">
              <a-row>
                <!-- 角色名称 -->
                <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                  <a-form-model-item label="角色名称">
                    <a-input v-model="baseInfo.roleName" disabled />
                  </a-form-model-item>
                </a-col>
                <!-- 权限字段 -->
                <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                  <a-form-model-item label="权限字段">
                    <a-input v-model="baseInfo.roleCode" disabled />
                  </a-form-model-item>
                </a-col>
                <!-- 角色类型 -->
                <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                  <a-form-model-item label="角色类型">
                    <a-input
                      :value="baseInfo.roleType | filterRoleType"
                      disabled
                    />
                  </a-form-model-item>
                </a-col>
                <!-- 状态 -->
                <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                  <a-form-model-item label="状态">
                    <a-input
                      :value="filterRoleStatus(baseInfo.status)"
                      disabled
                    />
                  </a-form-model-item>
                </a-col>
                <!-- 备注 -->
                <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24">
                  <a-form-model-item label="备注">
                    <a-input
                      type="textarea"
                      v-model="baseInfo.remark"
                      disabled
                    />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-form-model>
          </div>
        </a-collapse-panel>

        <!-- 租户菜单信息 -->
        <a-collapse-panel key="2" :show-arrow="false" title="租户菜单信息">
          <template slot="header">
            <div class="collapse-custom-header">
              {{ activeKey.includes("2") ? "收起" : "展开" }}
              <div class="icon" :class="[activeKey.includes('2') && 'active']">
                <bj-icon-font
                  type="xl"
                  color="#0068B7"
                  :size="10"
                ></bj-icon-font>
              </div>
            </div>
          </template>
          <div class="tenant-menu-container">
            <a-row :gutter="20">
              <a-col
                :xs="24"
                :sm="24"
                :md="12"
                :lg="8"
                :xl="8"
                :xxl="6"
                v-for="(item, index) in treeData"
                :key="index"
              >
                <div class="gutter-box flex">
                  <div class="header">
                    <div class="title">{{ item.tenantName }}</div>
                  </div>
                  <div class="body">
                    <a-empty v-if="item.menuList.length == 0" />
                    <a-tree
                      v-else
                      :defaultExpandAll="true"
                      :tree-data="item.menuList"
                      :replaceFields="{
                        children: 'childs',
                        title: 'menuName',
                        key: 'id',
                      }"
                    />
                  </div>
                </div>
              </a-col>
            </a-row>
          </div>
        </a-collapse-panel>

        <!-- 用户配置信息   -->
        <a-collapse-panel key="3" :show-arrow="false" title="用户配置信息">
          <template slot="header">
            <div class="collapse-custom-header">
              {{ activeKey.includes("3") ? "收起" : "展开" }}
              <div class="icon" :class="[activeKey.includes('3') && 'active']">
                <bj-icon-font
                  type="xl"
                  color="#0068B7"
                  :size="10"
                ></bj-icon-font>
              </div>
            </div>
          </template>
          <div class="user-config-container">
            <div class="condition-container">
              <!-- 租户名称 -->
              <a-tree-select
                placeholder="请选择租户名称"
                :replaceFields="{
                  children: 'child',
                  title: 'tenantName',
                  key: 'id',
                  value: 'tenantCode',
                }"
                v-model="userConfig.tenantCode"
                :tree-data="userConfig.tenantSource"
                @change="userConfigTenantChange"
              >
              </a-tree-select>
              <!-- 组织名称 -->
              <a-tree-select
                placeholder="请选择组织名称"
                :replaceFields="{
                  children: 'childs',
                  title: 'orgName',
                  key: 'id',
                  value: 'id',
                }"
                v-model="userConfig.orgId"
                :tree-data="userConfig.orgSource"
                @change="userConfigSearch"
                max-height="528px"
              >
              </a-tree-select>

              <!-- 用户昵称 -->
              <a-input
                v-model="userConfig.userName"
                placeholder="请输入用户昵称"
              />
              <a-button type="primary" @click="userConfigSearch">
                查询
              </a-button>
            </div>
            <div class="table-container" v-loading="userConfig.loading">
              <vxe-table
                max-height="528px"
                align="center"
                :data="userConfig.tableSource"
                show-overflow
                show-header-overflow
                show-footer-overflow
                show-footer
                :column-config="{ resizable: true }"
                class="scrollbarStyle"
                :sort-config="{ trigger: 'cell' }"
                ref="xTable"
                :scroll-x="{ gt: 10 }"
                :scroll-y="{ gt: 100 }"
                row-id="id"
                :checkbox-config="{
                  reserve: true,
                }"
              >
                <vxe-column
                  :title="item.title"
                  :field="item.key"
                  :key="index"
                  :min-width="item.width"
                  show-overflow
                  v-for="(item, index) in userConfig.tableColumns"
                >
                  <template slot-scope="scope">
                    <div v-if="item.key == 'userState'">
                      <div
                        class="status-text"
                        :class="[checkStatusClass(scope.row)]"
                      >
                        {{ fliterName(scope.row) }}
                      </div>
                    </div>
                    <div v-else-if="item.key == 'isStatus'">
                      {{ fliterMark(scope.row) }}
                    </div>
                    <div v-else>{{ scope.row[item.key] }}</div>
                  </template>
                </vxe-column>
              </vxe-table>
              <!-- 分页 -->
              <div class="pager-container">
                <vxe-pager
                  background
                  :current-page.sync="userConfig.pager.page"
                  :page-size.sync="userConfig.pager.pageSize"
                  :total="userConfig.pager.total"
                  :layouts="[
                    'PrevPage',
                    'JumpNumber',
                    'NextPage',
                    'Sizes',
                    'FullJump',
                  ]"
                  @page-change="paginationChange"
                >
                  <template #left>
                    <div class="vxe-pager-left-tip-container">
                      第<span>1</span>到<span
                        >{{
                          Math.ceil(
                            userConfig.pager.total / userConfig.pager.pageSize
                          ) || 1
                        }}页 </span
                      >共<span>{{ userConfig.pager.total }}</span
                      >条记录
                    </div>
                  </template>
                </vxe-pager>
              </div>
            </div>
          </div>
        </a-collapse-panel>

        <!-- 组织配置信息     -->
        <a-collapse-panel key="4" :show-arrow="false" title="组织配置信息">
          <template slot="header">
            <div class="collapse-custom-header">
              {{ activeKey.includes("4") ? "收起" : "展开" }}
              <div class="icon" :class="[activeKey.includes('4') && 'active']">
                <bj-icon-font
                  type="xl"
                  color="#0068B7"
                  :size="10"
                ></bj-icon-font>
              </div>
            </div>
          </template>
          <div class="org-config-container">
            <div class="condition-container">
              <!-- 租户名称 -->
              <a-tree-select
                allow-clear
                placeholder="请选择租户名称"
                :replaceFields="{
                  children: 'child',
                  title: 'tenantName',
                  key: 'id',
                  value: 'tenantCode',
                }"
                v-model="orgConfig.tenantCode"
                :tree-data="orgConfig.tenantSource"
                @change="orgConfigSerach"
              >
              </a-tree-select>
              <a-button type="primary" @click="orgConfigSerach">
                查询
              </a-button>
            </div>
            <div class="table-container" v-loading="orgConfig.loading">
              <vxe-table
                resizable
                ref="xTable"
                align="center"
                class="scrollbarStyle"
                show-header-overflow
                show-footer-overflow
                show-footer
                :tree-config="{
                  rowField: 'id',
                  parentField: 'parentOrgCode',
                  children: 'childs',
                }"
                max-height="528px"
                :data="orgConfig.tableSource"
              >
                <vxe-column
                  :title="item.title"
                  :field="item.key"
                  :key="index"
                  :min-width="item.width"
                  :tree-node="item.treeNode || false"
                  v-for="(item, index) in orgConfig.tableColumns"
                  :align="item.align || 'center'"
                  header-align="center"
                  show-overflow
                ></vxe-column>
              </vxe-table>
              <!-- 分页 -->
              <div class="pager-container">
                <vxe-pager
                  background
                  :current-page.sync="orgConfig.pager.page"
                  :page-size.sync="orgConfig.pager.pageSize"
                  :total="orgConfig.pager.total"
                  :layouts="[
                    'PrevPage',
                    'JumpNumber',
                    'NextPage',
                    'Sizes',
                    'FullJump',
                  ]"
                  @page-change="orgPaginationChange"
                >
                  <template #left>
                    <div class="vxe-pager-left-tip-container">
                      第<span>1</span>到<span
                        >{{
                          Math.ceil(
                            orgConfig.pager.total / orgConfig.pager.pageSize
                          ) || 1
                        }}页 </span
                      >共<span>{{ orgConfig.pager.total }}</span
                      >条记录
                    </div>
                  </template>
                </vxe-pager>
              </div>
            </div>
          </div>
        </a-collapse-panel>

        <!-- 设备配置信息-->
        <a-collapse-panel key="5" :show-arrow="false" title="设备配置信息">
          <template slot="header">
            <div class="collapse-custom-header">
              {{ activeKey.includes("5") ? "收起" : "展开" }}
              <div class="icon" :class="[activeKey.includes('5') && 'active']">
                <bj-icon-font
                  type="xl"
                  color="#0068B7"
                  :size="10"
                ></bj-icon-font>
              </div>
            </div>
          </template>
          <div class="user-config-container">
            <div class="condition-container">
              <!-- 项目名称 -->
              <a-select
                v-model="equConfig.proName"
                placeholder="请选择项目名称"
                allow-clear
                @change="equProChange"
                :loading="equConfig.proLoaidng"
              >
                <a-select-option
                  :value="item.tenantCode"
                  v-for="(item, index) in equConfig.proSource"
                  :key="index"
                >
                  {{ item.proName }}
                </a-select-option>
              </a-select>
              <!-- 标段名称 -->
              <a-select
                v-model="equConfig.blockCode"
                placeholder="请选择标段名称"
                allow-clear
                @change="equConfigSerach"
                :loading="equConfig.blockLoading"
              >
                <a-select-option
                  :value="item.orgCode"
                  v-for="(item, index) in equConfig.blockSource"
                  :key="index"
                >
                  {{ item.orgName }}
                </a-select-option>
              </a-select>
              <!-- 设备名称 -->
              <a-input
                v-model="equConfig.equName"
                placeholder="请输入设备名称"
              />
              <a-button type="primary" @click="equConfigSerach">
                查询
              </a-button>
            </div>
            <div class="table-container" v-loading="equConfig.loading">
              <vxe-table
                max-height="528px"
                align="center"
                :data="equConfig.tableSource"
                show-overflow
                show-header-overflow
                show-footer-overflow
                show-footer
                :column-config="{ resizable: true }"
                class="scrollbarStyle"
                :sort-config="{ trigger: 'cell' }"
                ref="xTable"
                :scroll-x="{ gt: 10 }"
                :scroll-y="{ gt: 100 }"
                row-id="id"
                :checkbox-config="{
                  reserve: true,
                }"
              >
                <vxe-column
                  :title="item.title"
                  :field="item.key"
                  :key="index"
                  :min-width="item.width"
                  show-overflow
                  v-for="(item, index) in equConfig.tableColumns"
                ></vxe-column>
              </vxe-table>
              <!-- 分页 -->
              <div class="pager-container">
                <vxe-pager
                  background
                  :current-page.sync="equConfig.pager.page"
                  :page-size.sync="equConfig.pager.pageSize"
                  :total="equConfig.pager.total"
                  :layouts="[
                    'PrevPage',
                    'JumpNumber',
                    'NextPage',
                    'Sizes',
                    'FullJump',
                  ]"
                  @page-change="equPaginationChange"
                >
                  <template #left>
                    <div class="vxe-pager-left-tip-container">
                      第<span>1</span>到<span
                        >{{
                          Math.ceil(
                            equConfig.pager.total / equConfig.pager.pageSize
                          ) || 1
                        }}页 </span
                      >共<span>{{ equConfig.pager.total }}</span
                      >条记录
                    </div>
                  </template>
                </vxe-pager>
              </div>
            </div>
          </div>
        </a-collapse-panel>
      </a-collapse>
    </div>
  </div>
</template>

<script>
//【详情】

import { addAttributeByKey } from "@/utils";
import { getLoginData } from "@/tools";
import { getTenantList } from "@/api/user-center/organizationManage.js";
import {
  getTenantMenuByRoleId,
  getRoleDetail,
} from "@/api/user-center/roleManage.js";
import {
  getUserTree,
  getUserManageList,
} from "@/api/user-center/userManage.js";
import {
  getOrganizationManageList,
  getNewTenantList,
} from "@/api/user-center/organizationManage.js";
import {
  getProjectList,
  getBlockList,
  getEqumentList,
} from "@/api/user-center/equipmentManage.js";
export default {
  data() {
    return {
      //
      activeKey: ["1", "2", "3", "4", "5"],
      //基本信息
      baseInfo: {
        //角色名称
        roleName: "",
        //权限字段
        roleCode: "",
        //角色类型
        roleType: "",
        //状态
        status: "",
        //备注
        remark: "",
      },
      treeData: [],
      //用户配置信息
      userConfig: {
        loading: false,
        //租户名称
        tenantCode: undefined,
        tenantSource: [],
        //组织名称
        orgId: undefined,
        orgSource: [],
        //用户昵称
        userName: "",
        //table
        tableSource: [],
        tableColumns: [
          {
            title: "登录账号",
            dataIndex: "loginId",
            key: "loginId",
            width: "",
          },
          {
            title: "昵称",
            dataIndex: "userName",
            key: "userName",
            width: "",
          },
          {
            title: "手机号",
            dataIndex: "mobile",
            key: "mobile",
            width: "",
          },
          {
            title: "邮箱",
            dataIndex: "email",
            key: "email",
            width: "",
          },
          {
            title: "用户状态",
            dataIndex: "userState",
            key: "userState",
            width: "",
          },
          {
            title: "用户标识",
            dataIndex: "isStatus",
            key: "isStatus",
            width: "",
          },
          {
            title: "最后登录时间",
            dataIndex: "updateTime",
            key: "updateTime",
            width: "",
          },
        ],
        //分页
        pager: {
          page: 1,
          pageSize: 10,
          total: 10,
        },
      },
      //组织配置信息
      orgConfig: {
        loading: false,
        //租户名称
        tenantCode: undefined,
        tenantSource: [],
        //table
        tableSource: [],
        tableColumns: [
          {
            title: "组织名称",
            dataIndex: "orgName",
            key: "orgName",
            width: "",
            treeNode: true,
            align: "left",
          },
          {
            title: "组织编码",
            dataIndex: "orgCode",
            key: "orgCode",
            width: "",
          },
          {
            title: "组织单位名称",
            dataIndex: "orgNuitName",
            key: "orgNuitName",
            width: "",
          },
          {
            title: "组织类型",
            dataIndex: "orgTypeDesc",
            key: "orgTypeDesc",
            width: "",
          },
          {
            title: "单位类型",
            dataIndex: "secTypeDesc",
            key: "secTypeDesc",
            width: "",
          },
          {
            title: "租户名称",
            dataIndex: "tenantDesc",
            key: "tenantDesc",
            width: "",
          },
        ],
        //分页
        pager: {
          page: 1,
          pageSize: 10,
          total: 10,
        },
      },
      //设备配置信息
      equConfig: {
        loading: false,
        //项目名称
        proName: undefined,
        proSource: [],
        proLoaidng: false,
        //标段名称
        blockCode: undefined,
        blockSource: [],
        blockLoading: false,
        //设备名称
        equName: "",
        //table
        tableSource: [],
        tableColumns: [
          {
            title: "实体设备编号",
            dataIndex: "entityEquNum",
            key: "entityEquNum",
            width: "",
          },
          {
            title: "设备编号",
            dataIndex: "equNum",
            key: "equNum",
            width: "",
          },
          {
            title: "设备名称",
            dataIndex: "equName",
            key: "equName",
            width: "",
          },
          {
            title: "设备类型",
            dataIndex: "equTypeDesc",
            key: "equTypeDesc",
            width: "",
          },
          {
            title: "租户名称",
            dataIndex: "tenantName",
            key: "tenantName",
            width: "",
          },
          {
            title: "标段名称",
            dataIndex: "secName",
            key: "secName",
            width: "",
          },
          {
            title: "系统名称",
            dataIndex: "systemName",
            key: "systemName",
            width: "",
          },
        ],
        //分页
        pager: {
          page: 1,
          pageSize: 10,
          total: 10,
        },
      },
    };
  },
  filters: {
    //校验角色类型名称 【1普通角色；2安全科角色】
    filterRoleType(val) {
      switch (val) {
        case "1":
          return "普通角色";

        case "2":
          return "安全科角色";

        default:
          return "--";
      }
    },
  },
  mounted() {
    this.getAllData();
  },
  methods: {
    getAllData() {
      this.getDetail();
      this.getTenantMenuData();
      this.getUserConfigTenantList();
      this.getOrgConfigTenantList();
      this.getOrgConfigTableData();
      this.getProjectList();
      this.geteEquConfigTableData();
    },

    //查询基本信息
    getDetail() {
      let { id } = this.$route.query;
      getRoleDetail(id)
        .then((res) => {
          let { data } = res;
          this.baseInfo = {
            //角色名称
            roleName: data.result.roleName,
            //权限字段
            roleCode: data.result.roleCode,
            //角色类型
            roleType: data.result.roleType,
            //状态
            status: data.result.disabled,
            //备注
            remark: data.result.remark,
          };
        })
        .catch((_) => {});
    },

    //查询租户菜单信息
    getTenantMenuData() {
      let { id } = this.$route.query;
      getTenantMenuByRoleId({ roleId: id })
        .then((res) => {
          let { data } = res;
          let tree = data?.result || [];
          tree.forEach((item) => {
            addAttributeByKey(
              null,
              "scopedSlots",
              { icon: "custom" },
              item.menuList,
              "childs"
            );
          });
          this.treeData = tree || [];
        })
        .catch((_) => {
          this.treeData = [];
        });
    },

    //用户配置信息-【查询条件】租户下拉框
    getUserConfigTenantList() {
      return new Promise((resolve, reject) => {
        let { userId } = getLoginData();
        getTenantList({ userId })
          .then((res) => {
            let { data } = res;
            let tree = data?.result || [];
            this.userConfig.tenantSource = addAttributeByKey(
              null,
              "scopedSlots",
              { icon: "custom" },
              tree,
              "child"
            );
            let { tenantCode = "" } = JSON.parse(
              localStorage.getItem("ORGANIZATION") || "{}"
            );
            this.userConfig.tenantCode = tenantCode;
            this.getUserConfigManageTree();
            resolve();
          })
          .catch((_) => {
            this.userConfig.tenantCode = undefined;
            this.userConfig.tenantSource = [];
            reject();
          })
          .finally((_) => {});
      });
    },
    //用户配置信息-【查询条件】组织名称下拉框
    getUserConfigManageTree() {
      let { tenantCode } = this.userConfig;
      return new Promise((resolve, reject) => {
        getUserTree({ orgName: "", tenantCode })
          .then((res) => {
            let { data } = res;
            this.userConfig.orgSource = addAttributeByKey(
              null,
              "scopedSlots",
              { icon: "custom" },
              data?.result || [],
              "childs"
            );
            this.userConfig.orgId = this.userConfig.orgSource?.[0].id;
            this.getUserConfigTableData();
            resolve();
          })
          .catch((_) => {
            this.userConfig.orgSource = [];
            reject();
          });
      });
    },
    //用户配置信息-【列表】
    getUserConfigTableData() {
      this.userConfig.loading = true;
      let { page, pageSize } = this.userConfig.pager;
      let { orgId, userName } = this.userConfig;
      let { id } = this.$route.query;
      return new Promise((resolve, reject) => {
        getUserManageList({
          page,
          pageSize,
          userName,
          userState: "",
          orgId,
          roleId: id,
        })
          .then((res) => {
            let {
              data: { result },
            } = res;
            this.userConfig.tableSource = result?.rows || [];
            this.userConfig.pager.total = result?.total || 0;
            resolve();
          })
          .catch((_) => {
            this.userConfig.tableSource = [];
            this.userConfig.pager.total = 0;
            reject();
          })
          .finally((_) => {
            this.userConfig.loading = false;
          });
      });
    },
    //用户配置信息-【选择租户】
    userConfigTenantChange() {
      this.userConfig.pager.page = 1;
      this.getUserConfigManageTree();
    },
    //用户配置信息-【搜索】
    userConfigSearch() {
      this.userConfig.pager.page = 1;
      this.getUserConfigTableData();
    },
    //组织配置信息-【查询条件】租户下拉框
    getOrgConfigTenantList() {
      return new Promise((resolve, reject) => {
        let { userId } = getLoginData();
        getNewTenantList({ userId })
          .then((res) => {
            let { data } = res;
            let tree = data?.result || [];
            this.orgConfig.tenantSource = addAttributeByKey(
              null,
              "scopedSlots",
              { icon: "custom" },
              tree,
              "child"
            );
            resolve();
          })
          .catch((_) => {
            this.orgConfig.tenantSource = [];
            reject();
          })
          .finally((_) => {});
      });
    },
    //组织配置信息-【列表】
    getOrgConfigTableData() {
      this.orgConfig.loading = true;
      let { page, pageSize } = this.orgConfig.pager;
      let { tenantCode } = this.orgConfig;
      let { id } = this.$route.query;
      return new Promise((resolve, reject) => {
        getOrganizationManageList({
          page,
          pageSize,
          tenantCode: tenantCode ? tenantCode : "",
          roleId: id,
        })
          .then((res) => {
            let {
              data: { result },
            } = res;
            this.orgConfig.tableSource = result?.rows || [];
            this.orgConfig.pager.total = result?.total || 0;
            resolve();
          })
          .catch((_) => {
            this.orgConfig.tableSource = [];
            this.orgConfig.pager.total = 0;
            reject();
          })
          .finally((_) => {
            this.orgConfig.loading = false;
          });
      });
    },
    //用户配置信息-【搜索】
    orgConfigSerach() {
      this.orgConfig.pager.page = 1;
      this.getOrgConfigTableData();
    },
    //设备配置信息-【查询条件】项目下拉框
    getProjectList() {
      this.equConfig.proLoaidng = true;
      return new Promise((resolve, reject) => {
        let { userId } = getLoginData();
        getProjectList({ userId })
          .then((res) => {
            let { data } = res;
            this.equConfig.proSource = data?.result || [];
            resolve();
          })
          .catch((_) => {
            this.equConfig.proSource = [];
            reject();
          })
          .finally((_) => {
            this.equConfig.proLoaidng = false;
          });
      });
    },
    //设备配置信息-【选择租户】
    equProChange() {
      this.equConfig.blockCode = undefined;
      this.getBlockList();
      this.equConfigSerach();
    },
    //设备配置信息-【查询条件】标段下拉框
    getBlockList() {
      this.equConfig.blockLoading = true;
      return new Promise((resolve, reject) => {
        let { userId } = getLoginData();
        let { proName } = this.equConfig;
        getBlockList({ userId, tenantCode: proName ? proName : "" })
          .then((res) => {
            let { data } = res;
            this.equConfig.blockSource = data?.result || [];
            resolve();
          })
          .catch((_) => {
            this.equConfig.blockSource = [];
            reject();
          })
          .finally((_) => {
            this.equConfig.blockLoading = false;
          });
      });
    },
    //设备配置信息-【列表】
    geteEquConfigTableData() {
      this.equConfig.loading = true;
      return new Promise((resolve, reject) => {
        let { page, pageSize } = this.equConfig.pager;
        let { proName, blockCode, equName } = this.equConfig;
        let { id } = this.$route.query;
        getEqumentList({
          tenantCode: proName ? proName : "",
          orgCode: blockCode ? blockCode : "",
          equName,
          roleId: id,
          systemCode: "",
          equTypeValue: "",
          entityEquNum: "",
          page,
          pageSize,
        })
          .then((res) => {
            let { data } = res;
            this.equConfig.tableSource = data?.result?.rows || [];
            this.equConfig.pager.total = data?.result?.total || 0;
            resolve();
          })
          .catch((_) => {
            this.equConfig.tableSource = [];
            this.equConfig.pager.total = 0;
            reject();
          })
          .finally((_) => {
            this.equConfig.loading = false;
          });
      });
    },

    //设备配置信息-【搜索】
    equConfigSerach() {
      this.equConfig.pager.page = 1;
      this.geteEquConfigTableData();
    },
    //校验角色状态名称
    filterRoleStatus(val) {
      switch (val) {
        case 0:
          return "正常";

        case 1:
          return "停用";

        default:
          return "--";
      }
    },
    //校验用户标识
    fliterMark(row) {
      let { isStatus } = row;
      switch (isStatus) {
        case "0":
          return "超级管理员";

        case "1":
          return "普通用户";

        default:
          return "--";
      }
    },
    //校验用户状态名称
    fliterName(row) {
      let { isStatus } = row;
      switch (isStatus) {
        case "0":
          return "超级管理员";

        case "1":
          return "普通用户";

        default:
          return "--";
      }
    },

    //校验用户状态className
    checkStatusClass(row) {
      let { userState } = row;
      switch (userState) {
        case 1:
          return "no-activate";

        case 2:
          return "normal";

        case 3:
          return "cancel";

        case 4:
          return "lock";

        default:
          return "cancel";
      }
    },

    //【用户配置信息】监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.userConfig.pager.page = currentPage;
      this.userConfig.pager.pageSize = pageSize;
      this.getUserConfigTableData();
    },
    //【组织配置信息】监听分页切换
    orgPaginationChange({ currentPage, pageSize }) {
      this.orgConfig.pager.page = currentPage;
      this.orgConfig.pager.pageSize = pageSize;
      this.getOrgConfigTableData();
    },
    //【设备配置信息】监听分页切换
    equPaginationChange({ currentPage, pageSize }) {
      this.equConfig.pager.page = currentPage;
      this.equConfig.pager.pageSize = pageSize;
      this.geteEquConfigTableData();
    },

    //返回
    back() {
      this.$router.push({
        path: "/nebula/user-app/roleManage",
      });
    },
  },
};
</script>

<style lang="less">
.roleManage-details-container {
  height: 100%;
  .flex();
  flex-direction: column;
  box-sizing: border-box;
  padding: 0 0 0 10px;
  .page-title-container {
    height: 46px;
    background: #ffffff;
    justify-content: space-between;
    padding: 0 20px;
    align-items: center;
    border-bottom: 1px solid #e8ebf0;
    &::before {
      .flex();
      align-items: center;
      content: attr(title);
      font-size: 16px;
      height: 16px;
      border-left: 3px solid var(--primary-color);
      padding-left: 10px;
    }
  }
  .page-body-container {
    flex: 1;
    flex-wrap: wrap;
    background: #fff;
    .custom-scrollbar();
    .ant-collapse {
      border-radius: 0;
      border: none;
      background: #fff;
      .ant-collapse-item {
        display: flex;
        flex-direction: column;
        position: relative;
        border: none;
        border-bottom: 1px solid #e8ebf0;
        &::before {
          position: absolute;
          left: 30px;
          top: 20px;
          content: attr(title);
          font-size: 14px;
          color: #525a5d;
        }
        .ant-collapse-content-box {
          padding: 0;
        }
        .ant-collapse-header {
          padding: 0;
          margin-left: auto;
          margin-right: 30px;
          border-radius: 0;
          height: 60px;
          .flex();
          align-items: center;
          .collapse-custom-header {
            color: var(--primary-color);
            .flex();
            .icon {
              transform: scale(0.75);
              margin-left: 4px;
              transition: 0.3s;
              &.active {
                transform: scale(0.75) rotate(180deg);
              }
            }
          }
        }
        .ant-collapse-content {
          border: none;
        }
      }
    }
    .condition-container {
      flex-shrink: 0;
      .flex();
      padding: 0 30px 20px 30px;
      .ant-select {
        width: 160px;
        margin-right: 16px;
      }
      .ant-input {
        width: 160px;
      }
      button {
        margin-left: 16px;
      }
    }
    //基本信息
    .base-info-container {
      padding: 0 80px 10px 20px;
      .ant-form-item {
        .flex();
        .ant-form-item-label {
          width: 100px;
          flex-shrink: 0;
        }
        .ant-form-item-control-wrapper {
          flex: 1;
          textarea {
            height: 80px;
          }
        }
      }
    }
    //租户菜单信息
    .tenant-menu-container {
      flex: 1;
      flex-wrap: wrap;
      padding: 0 30px;
      .custom-scrollbar();
      .ant-col {
        height: 430px;
        margin-bottom: 20px;
        .gutter-box {
          background: #ffffff;
          border-radius: 4px;
          height: 100%;
          box-sizing: border-box;
          padding: 0 14px 14px 14px;
          flex-direction: column;
          border: 1px solid #e8ebf0;
          .header {
            height: 50px;
            flex-shrink: 0;
            font-size: 15px;
            color: #333;
            .flex();
            align-items: center;
            justify-content: space-between;
            overflow: hidden;
            .title {
              flex: 1;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-weight: bold;
            }
          }
          .body {
            flex: 1;
            background: #f6f9ff;
            .custom-scrollbar();
            .ant-tree {
              li {
                width: 100%;
                .ant-tree-node-content-wrapper {
                  width: calc(100% - 60px);
                }
              }
            }
          }
        }
      }
    }
    //用户配置信息
    .user-config-container {
      .flex();
      flex-direction: column;
      .table-container {
        flex: 1;
        .status-text {
          border-radius: 4px;
          color: #fff;
          width: 68px;
          .flex();
          align-items: center;
          justify-content: center;
          margin: 0 auto;
          font-size: 12px;
          &.normal {
            background: #4bc964;
          }
          &.lock {
            background: #ff3f4a;
          }
          &.cancel {
            background: #f1f2f7;
            color: #aab0bc;
          }
          &.no-activate {
            background: #0098ff;
          }
        }
      }
    }
  }
}
</style>
